<template>
  <v-menu open-on-hover right offset-x>
    <template v-slot:activator="{ on, attrs }">
      <v-icon
        v-bind="attrs"
        v-on="on"
        :color="success"
        >
        {{ items.length ? 'mdi-alarm-multiple' : 'mdi-alarm-off' }}
      </v-icon>
    </template>
    <template v-if="items.length">
      <v-list
        dense>
        <v-list-item
          dense
          link
          v-for="(item, index) in items"
          :key="index"
        >
          <v-list-item-title>{{ item[itemText] }}</v-list-item-title>
          <v-list-item-action-text style="width: 60px;">
            <small :class="item[statusText] == 3 ? 'green--text' : 'orange--text'">{{item[statusText] == 3 ? '已预订' : '未预订'}}</small>
          </v-list-item-action-text>
        </v-list-item>
      </v-list>
    </template>
    <template v-else>
      <div class="px-12 py-2 white">暂无安排</div>
    </template>
  </v-menu>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return []
      }
    },
    itemText: {
      type: String,
      reqruired: true
    },
    statusText: {
      type: String,
      default: 'status'
    }
  },
  computed: {
    success() {
      if(this.items.some(item => item[this.statusText] == 3)) {
        return 'success'
      } else {
        return 'default'
      }
    }
  }
}
</script>

<style>

</style>